<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-17 16:22:54
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-17 16:23:10
 * @FilePath: \text-online-system2\src\views\Talk\ManageStudent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="contain">
        <div class="manage_header">
            <!-- 老师的信息    从vuex来-->    
            <div class="teacher_contain">
                <el-avatar :size="60" :src=baseurl+users.avatar />
                <span class="main_teacher">主讲教师</span>
                <div class="teacher_msg">
                    <span class="name">{{ users.name }}</span>
                    <span class="number">{{ users.number }}</span>
                </div>
            </div>

            <!-- 搜索框 -->
            <div class="mt-4">
                <el-input v-model="seacher" placeholder="请输入要查找学生姓名或者学号" class="input" @blur="requery">
                    <template #append>
                        <el-button @click="seacherStudent" class="sercher_btn">
                            <el-icon size="1rem">
                                <Search />
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>
            </div>
        </div>

        <!--学生表格 -->
        <div class="studen_contain">
            <el-table ref="multipleTableRef" :data="students" style="width: 100%" :locale="{ emptyText: '暂无数据!' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column property="name" label="姓名" width="120" />

                <el-table-column property="number" label="学号" width="160" />
                <el-table-column property="phone" label="手机号" width="160" />

                <el-table-column property="school" label="学校" show-overflow-tooltip />
            </el-table>
            <div v-if="students.length > 0" style="margin-top: 20px ;margin-left: 2rem;">
                <el-button @click="deleteSelect">删除选中</el-button>
                <el-button @click="clearAll">取消已选中的</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import { ElTable } from 'element-plus'
import user from '../api/user.js'
import classes from '../api/class.js'
import { ElMessageBox } from 'element-plus'
import { h} from 'vue'
import {mapState} from 'vuex'
export default {
    name: 'TextOnlineSystem2ManageStudent',

    data() {
        return {
            baseurl : this.$http.defaults.baseURL,
            seacher: '',
            students: [],
            mutipleSelection: [],
            classes: [],
            activeName: 0, 
        };
    },

    mounted() {

        user.queryStudentInClass(this.currentClassId).then((res) => {
            if (res.data != '' && (typeof res.data != 'undefined')) {
                this.students = res.data
            }

        })



    },
    computed:{
        //从vueX获取数据
        ...mapState(['users','currentClassId'])
    },
    methods: {

        handleSelectionChange(e) {
            this.mutipleSelection = e
        },

        clearAll() {
            this.$refs.multipleTableRef.clearSelection()
        },

        seacherStudent() {
            user.queryStudentInClassSeacher({
                classId: this.currentClassId,
                contition: this.seacher
            }).then((res) => {
                if (res.data != '' && (typeof res.data != 'undefined')) {
                    this.students = res.data
                }else{
                    this.students =[]
                }
            })
        },
        requery() {
            if (this.seacher == '') {
                user.queryStudentInClass(this.currentClassId).then((res) => {
                    if (res.data != '' && (typeof res.data != 'undefined')) {
                        this.students = res.data
                    }
                })
            }

        },
        deleteSelect() {
            var idArr = Array.from(this.mutipleSelection, x => x = x.id);
            classes.deleteStudentInClass({ 'idArr': idArr, 'classId': this.currentClassId }).then((res) => {
                ElMessageBox({
                    title: '删除结果',
                    message: h('p', null, [
                        h('span', null, ''),
                        h('i', { style: 'color: teal' }, res.msg),
                    ]),
                })

                 //删除成功
            if (res.code == 1) {
                this.seacherStudent()
            }
            })
           

        },


    },

};
</script>

<style lang="css" scoped>
.contain {
    position: relative;

}

.teacher_contain {
    width: 12rem;
    height: 6.5rem;
    position: relative;
    margin-left: 7rem;
    display: inline-block;
}

.main_teacher {
    position: absolute;
    display: block;
    font-size: 0.8rem;
    border-radius: 2px;
    background-color: var(--greenColor2);
    border-radius: 20px;
    padding: 0.2rem 0.3rem;
    bottom: 1.5rem;
}

.teacher_msg {
    width: 3rem;
    display: inline-block;
    margin-left: 1rem;
    width: auto;
    height: auto;
    text-align: center;
}

.name {
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: block;
    width: auto;
    height: auto;
    margin: auto;
}

.sercher_btn:active {
    background-color: rgb(238, 237, 237) !important;
}

.input {
    position: absolute;
    width: 18rem;
    left: 25rem;
    bottom: 3rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07),

}

.manage_header {
    position: relative;

}

.studen_contain {
    position: absolute;
    width: 88%;
    height: 25rem;
    border: 1px solid var(--greenColor2);
    left: 2rem;
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
}
</style>